<template>
  <div class="couponPage">
    <!--<div class="header-content"><img src="../../../assets/img/prev.png" alt="" ><span>我的828</span></div>-->
    <div class="page-content">
      <div class="page-empty" v-if="emptyFlag">
        <div class="empty-box">
          <div class="empty-icon"></div>
          <p>暂无奖券</p>
        </div>
      </div>
      <Scroll v-else>
        <CouponItem v-for="(item,index) in couponList" :key="index" :item="item"></CouponItem>
      </Scroll>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import CouponItem from '../components/couponItem'
  import Scroll from '../../../components/scrollNew/scroll'
  import {getCoupons} from '../../../mock/mock';
  import functionalTool from '../../../utils/functionTools';
  export default {
    name: 'coupons',
    data () {
      return {
        couponList: [],
        emptyFlag: !1
      }
    },
    components: {
      CouponItem,
      Scroll
    },
    mounted () {
      this.getCouponList()
    },
    methods: {
      // 获取抵用券列表
      async getCouponList () {
        const dataParam = {
          userId: functionalTool.getUrlParam('accountId'),
          voucherType: null, // 传空查询所有类型的抵用券
          isUsedOrOverdue: '0',
          activityType: 1
        };
        // 处理axios post java后台接受不到参数
        try {
          const resData = await getCoupons(dataParam);
          if (resData.data.code === '200') {
            this.couponList = resData.data.data;
            this.couponList.length === 0 ? (this.emptyFlag = !0) : (this.emptyFlag = !1);
          } else {
            this.emptyFlag = !0;
          }
        } catch (e) {
          this.emptyFlag = !0;
          console.log(e);
        }
      }
    }
  };
</script>

<style scoped rel="stylesheet/stylus" lang="stylus">
  @import '../../../assets/css/mixin.styl';
  .couponPage
    background #f7f7f7
    padding rpx(20) rpx(30)
    box-sizing border-box
    height 100%
    .header-content
      height rpx(132)
      line-height rpx(132)
      background #fc9533
      text-align center
      color: #ffffff
      font-size $fontsize-large-x
      position relative
      img
        width rpx(22)
        height rpx(40)
        position absolute
        left rpx(30)
        top 50%
        transform translateY(-50%)
    .page-content
      height 100%
      .page-empty
        height 100%
        display flex
        justify-content center
        align-items center
        .empty-box
          .empty-icon
            width rpx(300)
            height rpx(168)
            margin 0 auto
            background url("../../../assets/img/vouchers_nothing@2x.png") no-repeat
            background-size 100% 100%
          & p
            text-align center
            font-size $fontsize-large-x
            color #999
            line-height rpx(150)
</style>
